<style>
    .name {
        width: 125px;
    }
    .name1 {
        width: 135px;
    }
    .name2 {
        width: 462px;
    }
    .name3 {
        width: 560px;
    }
</style>
<template>
    <div>
        <Row>
            <Card>
                <table width="1128px" border="1" cellpadding="2" cellspacing="0">
                    <caption>
                        <h2>常规巡检报告</h2>
                    </caption>
                    <Form>
                        <thead>
                        <tr v-for="header in headers">
                            <td colspan="5" v-model="header.time">日期：{{a | data}}</td>
                            <td colspan="4">班组：<input type="text" class="name2" v-model="header.team"></td>
                        </tr>
                        <tr>
                            <th class="name">巡检部位</th>
                            <th class="name1">巡检内容</th>
                            <th class="name">巡检情况</th>
                            <th class="name">巡检时间</th>
                            <th class="name">巡检人</th>
                            <th class="name">巡检情况</th>
                            <th class="name">巡检时间</th>
                            <th class="name">巡检人</th>
                            <th class="name">备注</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!--<template v-for="{item,index} in list">
                          <tr>
                            <th rowspan = item.num>{{item.position}}</th>
                            <td>{{item.content}}</td>
                            <td><input type="text" class="name" v-model="item.value1"></td>
                            <td><input type="text" class="name" v-model="item.value2"></td>
                            <td><input type="text" class="name" v-model="item.value3"></td>
                            <td><input type="text" class="name" v-model="item.value4"></td>
                            <td><input type="text" class="name" v-model="item.value5"></td>
                            <td><input type="text" class="name" v-model="item.value6"></td>
                            <td><input type="text" class="name" v-model="item.value7"></td>
                          </tr>
                        </template>-->
                        <tr v-for="{item,value} in list">
                            <th rowspan="item.num">{{item.position}}</th>
                            <td>{{item.content}}</td>
                            <td><input type="text" class="name" v-model="item.value1"></td>
                            <td><input type="text" class="name" v-model="item.value2"></td>
                            <td><input type="text" class="name" v-model="item.value3"></td>
                            <td><input type="text" class="name" v-model="item.value4"></td>
                            <td><input type="text" class="name" v-model="item.value5"></td>
                            <td><input type="text" class="name" v-model="item.value6"></td>
                            <td><input type="text" class="name" v-model="item.value7"></td>
                        </tr>
                        </tbody>
                        <tfoot style="width: 1000px;" >
                        <tr>
                            <td colspan="9">一.安全阀必须保持常开状态</td>
                        </tr>
                        <tr>
                            <td colspan="9">二.放空阀保持常开状态，需要放空时手动操作打开，操作人员不准离开，放空结果后关闭，关闭时应注意阀门是否关紧</td>
                        </tr>
                        <tr>
                            <td colspan="9">三.巡检频率：每班次巡检两次</td>
                        </tr>
                        <tr v-for="footer in footers">
                            <td colspan="5">班长：<input type="text" class="name3" v-model="footer.monitorName"></td>
                            <td colspan="4">站长：<input type="text" class="name2" v-model="footer.stationmasterName"></td>
                        </tr>
                        </tfoot>
                    </Form>
                </table>
                <div align="center" style="padding-top: 4px">
                    <Button type="primary" icon="arrow-up-a">提交</Button>
                    <Button type="error" icon="ios-refresh">重置</Button>
                    <!--<router-link to="/routine"><Button type="primary" icon="reply">返回</Button></router-link>-->
                </div>
            </Card>
        </Row>
    </div>
</template>
<script type="text/ecmascript-6">
    import api from '@/libs/util';
    export default {
        data() {
            return {
                headers:[],
                list:[],
                footers:[],
                a: Date.now(),
            }
        },
        filters: {
            data: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
                /*var hour = d.getHours();
                 var minutes = d.getMinutes();
                 var seconds = d.getSeconds();*/
                return year + '-' + month + '-' + day /*+ ' ' + hour + ':' + minutes + ':' + seconds*/;
            }
        }
    }
</script>
